<template>
  <p :class="{ time: timerType !== 'stopRecord', size }">
    <!-- 已进行： -->
    <!-- {{ type }} -->
    <!-- {{ time }}{{ timeObj }} -->
    <!-- {{ subtaskTimeDiffTotle }} -->
    <template v-if="timerType !== 'stopRecord'">已见证时长:</template>
    <span :class="{ 'stop-gray': !type }">
      {{ sign }}
      <template v-if="timeObj.d">
        <em>{{ timeObj.d }}</em>
        <template>天</template>
      </template>
      <em>{{ timeObj.h }}</em>
      <template>时</template>
      <em>{{ timeObj.m }}</em>
      <template>分</template>
      <em>{{ timeObj.s }}</em>
      <template>秒</template>
    </span>
  </p>
</template>
<script>
  export default {
    components: {},
    props: {
      size: {
        type: String,
        default: ""
      },
      timerType: {
        type: String,
        default: ""
      },
      // 计时器
      type: {
        default: 1
      },
      // 暂停时长
      subtaskTimeDiffTotle: {
        type: Number,
        default: 0
      },
      endTime: {
        type: String,
        default: ""
      },
      startTime: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        stop: false,
        sign: "",
        timeObj: {
          d: "",
          h: "",
          m: "",
          s: ""
        }
      };
    },
    watch: {
      subtaskTimeDiffTotle(val) {
        console.log("val", val);
        this.formatFn();
      },
      startTime() {
        this.stop = false;
        this.formatFn();
      },
      type() {
        this.initFn();
      }
    },
    created() {
      // if (!this.startTime) {
      //   return;
      // }
      this.initFn();
    },
    beforeDestroy() {
      clearInterval(this.setIntervalFlg);
    },
    methods: {
      initFn() {
        clearInterval(this.setIntervalFlg);
        this.formatFn();
        if (this.type) {
          this.setIntervalFlg = setInterval(() => {
            this.formatFn();
          }, 1000);
        }
      },
      formatFn() {
        this.timeObj = {};
        // console.log("this.time", this.time);
        // console.log("Date", new Date(this.time));
        // console.log("endTime", this.endTime);
        const endTime = this.endTime ? new Date(this.endTime).getTime() : new Date().getTime();
        const startTime = this.startTime
          ? new Date(this.startTime).getTime() + this.subtaskTimeDiffTotle
          : new Date().getTime();
        let n = endTime - startTime;
        this.sign = "";
        if (n < 0) {
          this.sign = "-";
          n = -n;
        }
        // 相差的毫秒数
        const ms = n; // Date.parse(endTime) - Date.parse(startTime);
        this.stop = !n;
        const minutes = 1000 * 60;
        const hours = minutes * 60;
        const days = hours * 24;
        // var years = days * 365;
        // 求出天数
        const d = Math.floor(ms / days);
        // 求出除开天数，剩余的毫秒数
        const h = Math.floor((ms % days) / hours);
        const m = Math.floor((ms % hours) / minutes);
        const s = Math.floor((ms % minutes) / 1000);
        // console.log("d", d);
        // console.log("h", h);
        // console.log("m", m);
        // console.log("s", s);
        // d = d < 0 ? 0 : d;
        // h = h < 0 ? 0 : h;
        // m = m < 0 ? 0 : m;
        // s = s < 0 ? 0 : s;
        this.timeObj = {
          d,
          h: h > 9 || h < 0 ? h : `0${h}`,
          m: m > 9 || h < 0 ? m : `0${m}`,
          s: s > 9 || h < 0 ? s : `0${s}`
        };
      }
    }
  };
</script>
<style lang="scss" scoped>
  .time {
    display: flex;
    align-items: center;
    justify-content: right;
    font-weight: bold;
    .stop-gray {
      color: #999999;
      span,
      em {
        color: #999999;
      }
      em {
        background: #f4f4f4;
        box-shadow: 0px 1px 1px 0px #dcdff0;
        border-radius: 3px;
        border: 1px solid rgba(153, 153, 153, 0.6);
      }
    }
    span {
      display: flex;
      align-items: center;
      justify-content: right;
      color: #1890ff;
      font-weight: normal;
    }
    em {
      font-weight: bold;
      min-width: 22px;
      padding: 0 3px;
      height: 32px;
      line-height: 32px;
      color: #1890ff;
      text-align: center;
      font-size: 16px;
      margin: 0 3px 0 4px;
      position: relative;
      background: linear-gradient(360deg, rgba(65, 164, 255, 0.08) 0%, rgba(1, 99, 222, 0.08) 100%);
      box-shadow: 0px 1px 1px 0px #dcdff0;
      border-radius: 3px;
      border: 1px solid rgba(24, 144, 255, 0.6);
    }
    &.small {
      em {
        height: 20px;
        line-height: 20px;
        padding: 0 2px;
      }
    }
  }
</style>
